<template>
  <div class="tags-view-container">
    <el-scrollbar class="tags-view-wrapper">
      <router-link
        class="tags-view-item"
        :class="isActive(tag) ? 'active' : ''"
        v-for="(tag, index) in $store.state.tagsViewModule.tagList"
        :key="tag.id"
        :to="tag.path"
        @contextmenu.prevent="openMenu($event, { tag, current: $route.path, index })"
      >
        {{ tag.name }}
        <!-- 必须阻止事件冒泡，否则会出现 删除了 tag 又触发了 添加 tag事件 -->
        <el-icon
          class="el-icon-close"
          @click.prevent.stop="removeTag({ tag, current: $route.path, index })"
          v-if="tag.id !== 0"
        >
          <Close />
        </el-icon>
      </router-link>
    </el-scrollbar>
    <!-- 右键菜单 -->
    <ContextMenu v-show="visible" :style="menuStyle" :tagData="selectTag" />
  </div>
</template>
<script setup>
import { computed, watch, ref, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { onMounted } from 'vue'
import { pathMapTags } from '@/utils/mapTags.js'
import ContextMenu from './ContextMenu.vue'
import { useFilterPath } from '@/hooks/filterPath.js'

const store = useStore()
const route = useRoute()

// ------- tagsView相关 ----------
// 是否被选中
const isActive = tag => {
  return tag.path === useFilterPath(route.path)
}

// 获取当前的路径的菜单
const currentMenu = computed(() => {
  const userMenus = store.state.userModule.userMenus
  return pathMapTags(userMenus, useFilterPath(route.path))
})

// 初始化/添加 tags
const addTag = () => {
  store.commit('tagsViewModule/addTagsView', currentMenu.value)
}

// 移除 tag
const removeTag = data => {
  store.commit('tagsViewModule/removeTagsView', {
    type: 'self',
    data
  })
}

// 侦听当前路径变化，动态添加 tag
watch( () => route.path, () => {
    addTag()
  }, {
    immediate: true
  }
)

// -----contextMenu 相关--------
const selectTag = ref(null)
const visible = ref(false)
const menuStyle = reactive({
  left: 0,
  top: 0
})

//展示 menu
const openMenu = (e, tagData) => {
  const { x, y } = e
  menuStyle.left = x + 'px'
  menuStyle.top = y + 'px'
  selectTag.value = tagData
  visible.value = true
}

// 关闭 menu
const closeMenu = () => {
  visible.value = false
}

// 监听变化
watch(
  () => visible.value,
  val => {
    if (val) {
      document.body.addEventListener('click', closeMenu)
    } else {
      document.body.removeEventListener('click', closeMenu)
    }
  }
)

onMounted(() => {
  addTag()
})
</script>

<style lang="less" scoped>
.tags-view-container {
  height: 34px;
  width: 100%;
  background: #fff;
  // box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .04);
  // 不可换行*
  white-space: nowrap;
  user-select: none;

  .tags-view-wrapper {
    padding-bottom: 2px;
    // box-shadow: 0 2px 3px rgba(10, 22, 35, .11);
    box-shadow: 0 2px 3px rgba(8, 27, 52, 0.171);
  }
  .tags-view-item {
    text-decoration: none;
    display: inline-block;
    position: relative;
    cursor: pointer;
    height: 26px;
    line-height: 26px;
    border: 1px solid #d8dce5;
    color: #495060;
    background: #fff;
    padding: 0 8px;
    font-size: 12px;
    margin-left: 5px;
    margin-top: 4px;
    &:first-of-type {
      margin-left: 15px;
    }
    &:last-of-type {
      margin-right: 15px;
    }
    &.active {
      color: #fff;
      &::before {
        content: '';
        background: #fff;
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        position: relative;
        margin-right: 4px;
        box-shadow: 0 2px 3px rgba(10, 106, 231, 0.256);
      }
    }
    // close 按钮
    .el-icon-close {
      width: 16px;
      height: 16px;
      line-height: 10px;
      vertical-align: -2px;
      border-radius: 50%;
      text-align: center;
      transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      transform-origin: 100% 50%;
      margin-left: 3px;
      &:before {
        transform: scale(0.6);
        display: inline-block;
        vertical-align: -3px;
      }
      &:hover {
        background-color: #d2d6d9;
        color: #fff;
      }
    }
  }
  .active {
    // background: #42b983;
    background: #409eff;
  }
}
</style>
